<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>
<div style="width: 1000px;margin: 30px auto">
    <table class="lay-filter" id="test"></table>
</div>



<script src="../layui/layui.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

<script>
    layui.use('table', function(){
        var table = layui.table;

        table.render({
            elem: '#test'
            ,height: 312
            // ,url: '/demo/table/user/' //数据接口
            ,page: true //开启分页
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,cols: [[
                {field:'id', width:80, title: 'ID', sort: true,fixed:'left'}
                ,{field:'username', width:80, title: '用户名'}
                ,{field:'sex', width:80, title: '性别', sort: true}
                ,{field:'city', width:80, title: '城市'}
                ,{field:'sign', title: '签名', width: '20%', minWidth: 100} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
                ,{field:'experience', title: '积分', sort: true}
                ,{field:'score', title: '评分', sort: true}
                ,{field:'classify', title: '职业'}
                ,{field:'wealth', width:137, title: '财富', sort: true}
            ]]
            ,data:[{"id":"10001","username":"熊诚曦","sex":"男","city":"孝感市","sign":"熊诚曦，永远的神",
                "experience":"999999","score":"100","classify":"Java开发工程师","wealth":"7999w"},
                {"id":"10002","username":"熊诚曦","sex":"男","city":"孝感市","sign":"熊诚曦，永远的神",
                    "experience":"999999","score":"100","classify":"Java开发工程师","wealth":"7999w"},
                {"id":"10003","username":"熊诚曦","sex":"男","city":"孝感市","sign":"熊诚曦，永远的神",
                    "experience":"999999","score":"100","classify":"Java开发工程师","wealth":"7999w"},
                {"id":"10004","username":"熊诚曦","sex":"男","city":"孝感市","sign":"熊诚曦，永远的神",
                    "experience":"999999","score":"100","classify":"Java开发工程师","wealth":"7999w"},
                {"id":"10005","username":"熊诚曦","sex":"男","city":"孝感市","sign":"熊诚曦，永远的神",
                    "experience":"999999","score":"100","classify":"Java开发工程师","wealth":"7999w"},
                {"id":"10006","username":"熊诚曦","sex":"男","city":"孝感市","sign":"熊诚曦，永远的神",
                    "experience":"999999","score":"100","classify":"Java开发工程师","wealth":"7999w"},
                {"id":"10007","username":"熊诚曦","sex":"男","city":"孝感市","sign":"熊诚曦，永远的神",
                    "experience":"999999","score":"100","classify":"Java开发工程师","wealth":"7999w"},
                {"id":"10008","username":"熊诚曦","sex":"男","city":"孝感市","sign":"熊诚曦，永远的神",
                    "experience":"999999","score":"100","classify":"Java开发工程师","wealth":"7999w"},
                {"id":"10009","username":"熊诚曦","sex":"男","city":"孝感市","sign":"熊诚曦，永远的神",
                    "experience":"999999","score":"100","classify":"Java开发工程师","wealth":"7999w"},
                {"id":"10010","username":"熊诚曦","sex":"男","city":"孝感市","sign":"熊诚曦，永远的神",
                    "experience":"999999","score":"100","classify":"Java开发工程师","wealth":"7999w"},
                {"id":"10011","username":"熊诚曦","sex":"男","city":"孝感市","sign":"熊诚曦，永远的神",
                    "experience":"999999","score":"100","classify":"Java开发工程师","wealth":"7999w"},
                {"id":"10012","username":"熊诚曦","sex":"男","city":"孝感市","sign":"熊诚曦，永远的神",
                    "experience":"999999","score":"100","classify":"Java开发工程师","wealth":"7999w"}
            ]
        });
    });
</script>
</body>
</html>